<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="/js/jquery.min.js"></script>
    <script src="../layui/layui.all.js" charset="utf-8"></script>
</head>
<body>

<div class="layui-upload-drag" id="test10">
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
    <div class="layui-hide" id="uploadDemoView">
        <hr>
        <h3>上传成功啦</h3>
    </div>
</div>
<!--

<button type="button" class="layui-btn" id="test1">
    <i class="layui-icon">&#xe67c;</i>点我可以把excel数据上传到数据库中
</button>-->
<form class="layui-form" action="">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">请输入sql</label>
        <div class="layui-input-block">
            <textarea id="sql" name="sql" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">执行sql</button>
            <button id="resetreset" type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<table id="tableId" lay-filter="test"></table>
<script>

    layui.use('upload', function () {
        var upload = layui.upload;

        //拖拽上传
        upload.render({
            elem: '#test10'
            , accept: "file"
            , url: '/easyExcel/upload' //改成您自己的上传接口
            , done: function (res) {
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide')
                layui.$('#sql').val(res.data)
                console.log(res)
            }
        });
        /*//执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,accept: "file"
            ,url: '/easyExcel/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                layer.msg(res.retInfo);
            }
            ,error: function(){
                //请求异常回调
            }
        });*/
    });
</script>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            if (data.field["sql"] == null || data.field["sql"] == "") {
                layer.msg("请输入sql内容,否则没办法查询哈", {icon: 5, timeout: 3000});
                $("#sql").focus()
                return false;
            }
            $(function () {
                $.ajax({
                    url: "/easyExcel/execute",
                    contentType: "application/json;charset=UTF-8"
                    , type: "POST"
                    , data: JSON.stringify(data.field)
                    , dataType: "JSON",
                    beforeSend: function () {
                        layui.table.render({
                            elem: "#tableId"
                            , limit: 10000
                            , toolbar: true
                            , data: {}
                            , cols: {}
                        });
                        this.layerIndex = layer.load(0, {
                            shade: [0.3, '#393D49']
                            /*,
                            content: '<span class="loadtip">耗时操作处理中,请稍候...</span>',
                            success: function (layer) {
                                layer.find('.layui-layer-content').css({
                                    'padding-top': '30px',
                                    'width': '300px',
                                });
                                layer.find('.loadtip').css({
                                    'font-size':'18px',
                                    'margin-left':'5px',
                                    color:'#0000FF'
                                });
                            }*/
                        });
                        // layer.msg("耗时操作开始请稍后", {
                        //     icon: 6//成功的表情
                        // });
                    },
                    success: function (res) {
                        layer.msg("执行查询成功啦", {
                            icon: 6,//成功的表情
                            timeout: 1000
                        });
                        layui.table.render({
                            elem: "#tableId"
                            , limit: 10000
                            , toolbar: true
                            , data: res.tableData
                            , cols: res.cols
                        });
                    }, error: function (data) {
                        layer.msg(data.responseText, {icon: 5});
                    },
                    complete: function () {
                        layer.close(this.layerIndex);
                        $("#sql").focus();
                    }
                });
            });
            return false;
        });

        $("#resetreset").on("click",function () {
            $("#sql").focus();
        });
    });
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>


</script>

</body>
</html>